<template>
  <div class="main_spac1">
    <div class="paddingBottom20" v-loading="loading">
      <div class="monitor box">
        <div class="monitor_l">
          <div class="monitor_ls padding10 paddingRight30 paddingRight20">
            <h3>配送日期</h3>
            <div class="timebox">
              <div class="item">
                <el-dropdown @command="(value) => handleCommand(value, 1)">
                  <span class="el-dropdown-link">{{ time.year }}</span>
                  <el-dropdown-menu
                    class="menubox"
                    slot="dropdown"
                    style="overflow: auto; height: 150px"
                  >
                    <el-dropdown-item
                      v-for="(item, index) in yeararr"
                      :key="index"
                      :command="item"
                      >{{ item }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <span class="el-dropdown-link date">年</span>
              </div>
              <div class="item">
                <el-dropdown @command="(value) => handleCommand(value, 2)">
                  <span class="el-dropdown-link">{{ time.month }}</span>
                  <el-dropdown-menu
                    slot="dropdown"
                    style="overflow: auto; height: 150px"
                  >
                    <el-dropdown-item
                      v-for="(item, index) in 12"
                      :key="index"
                      :command="item"
                      >{{ item < 10 ? "0" + item : item }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <span class="el-dropdown-link date">月</span>
              </div>
              <div class="item">
                <el-dropdown @command="(value) => handleCommand(value, 3)">
                  <span class="el-dropdown-link">{{ time.day }}</span>
                  <el-dropdown-menu
                    slot="dropdown"
                    style="overflow: auto; height: 150px"
                  >
                    <el-dropdown-item
                      v-for="(item, index) in 31"
                      :key="index"
                      :command="item"
                      >{{ item < 10 ? "0" + item : item }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <span class="el-dropdown-link date">日</span>
              </div>
            </div>
          </div>
          <div
            class="monitor_ld padding10 paddingRight30 paddingRight20 paddingBottom20 main_white marginTop20"
          >
            <h3>单元分拣对比</h3>
            <div class="monitor_ldt" id="chartColumn"></div>
          </div>
        </div>
        <div class="monitor_r">
          <div class="monitor_ry box">
            <div
              class="monitor_ryl padding10 paddingRight30 main_white paddingRight20"
            >
              <h3 class="monitor_ti">商户分拣进度</h3>
              <div class="monitor_ryz">总数：{{ user.count || 0 }}</div>
              <div class="monitor_ryl_t">
                <ul class="box">
                  <li>
                    <div class="monitor_ryl_th" id="chartColumn1"></div>
                    <div class="monitor_ryl_tb">
                      已分拣商户：{{ user.over_count || 0 }}
                    </div>
                  </li>
                  <li>
                    <div class="monitor_ryl_th" id="chartColumn2"></div>
                    <div class="monitor_ryl_tb">
                      部分分拣商户：{{ user.in_count || 0 }}
                    </div>
                  </li>
                  <li>
                    <div class="monitor_ryl_th" id="chartColumn3"></div>
                    <div class="monitor_ryl_tb">
                      未分拣商户：{{ user.up_count || 0 }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="monitor_ryo padding10 marginLeft20 main_white">
              <h3 class="monitor_ti">订单分拣进度</h3>
              <div class="orderbar">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="'已分拣:' + order.over_count"
                  placement="top-start"
                >
                  <el-progress
                    :percentage="order_over"
                    :color="customColor"
                    :stroke-width="18"
                  ></el-progress>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="'部分分拣:' + order.in_count"
                  placement="top-start"
                >
                  <el-progress
                    :percentage="order_part"
                    :color="customColor"
                    :stroke-width="18"
                  ></el-progress>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="'未完成:' + user.up_count"
                  placement="top-start"
                >
                  <el-progress
                    :percentage="order_no"
                    :color="customColor"
                    :stroke-width="18"
                  ></el-progress>
                </el-tooltip>
              </div>
              <div class="monitor_ryz on">总量：{{ order.count }}</div>
            </div>
            <div
              class="monitor_ryr padding10 paddingRight30 marginLeft20 main_white paddingRight20"
            >
              <h3 class="monitor_ti">商品分拣进度</h3>
              <div class="monitor_ryh" id="chartColumn6"></div>
              <div class="monitor_ryz on">总量：{{ goods.count }}</div>
            </div>
          </div>
          <div class="monitor_rq marginTop20 box">
            <div
              class="monitor_rql padding10 paddingRight30 main_white paddingRight20"
            >
              <h3 class="monitor_ti">缺货商品占比</h3>
              <div class="monitor_ryh" id="chartColumn7"></div>
              <div class="monitor_ryz on">
                缺货总量：{{ order_list_que.over_count }}
              </div>
            </div>
            <div
              class="monitor_rqo padding10 paddingRight30 marginLeft20 main_white paddingRight20"
            >
              <h3 class="monitor_ti">分拣员出勤率</h3>
              <div class="monitor_ryz">
                人数：{{ sort.count + sort.over_count }}
              </div>
              <div class="monitor_ryl_t">
                <ul class="box">
                  <li>
                    <div class="monitor_ryl_th" id="chartColumn4"></div>
                    <div class="monitor_ryl_tb">已出勤：{{ sort.count }}</div>
                  </li>
                  <li>
                    <div class="monitor_ryl_th" id="chartColumn5"></div>
                    <div class="monitor_ryl_tb">
                      未出勤：{{ sort.over_count }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="monitor_rqr padding10 paddingRight30 marginLeft20 main_white paddingRight20"
            >
              <h3 class="monitor_ti">单元分拣进度</h3>
              <div class="orderbar">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    '已分拣:' + (order_list.count - order_list.over_count)
                  "
                  placement="right-start"
                >
                  <el-progress
                    :percentage="order_list_over"
                    :color="customColor"
                    :stroke-width="18"
                  ></el-progress>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="'未分拣：' + order_list.over_count"
                  placement="right-start"
                >
                  <el-progress
                    :percentage="order_list_no"
                    :color="customColor"
                    :stroke-width="18"
                  ></el-progress>
                </el-tooltip>
              </div>
              <div class="monitor_ryz on">总量：{{ order_list.count }}</div>
            </div>
          </div>
          <div class="monitor_rb">
            <div class="timeLine" id="timeLine"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  category_list,
  category_use,
} from "@/api/commodity/commodityClassification";
import { sorting_all } from "@/api/sorting/sortingStart";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
import { options } from "runjs";
import { parseTime } from "@/utils/index";

export default {
  components: {},
  data() {
    return {
      time: {
        year: parseTime(new Date(), "{y}"),
        month: parseTime(new Date(), "{m}"),
        day: parseTime(new Date(), "{d}"),
      },
      // 请求参数
      params: {
        send_time: parseTime(new Date(), "{y}-{m}-{d}"),
      },
      customColor: "#409eff",
      // 加载中
      loading: false,
      // 用户分拣进度
      user: {
        count: 0,
        in_count: 0,
        over_count: 0,
        up_count: 0,
      },
      // 订单分拣进度
      order: {
        count: 0,
        in_count: 0,
        over_count: 0,
        up_count: 0,
      },
      // 商品分拣进度
      goods: {
        count: 0,
        in_count: 0,
        over_count: 0,
        up_count: 0,
      },
      // 分拣缺勤率
      sort: {
        count: 0,
        over_count: 0,
      },
      // 单元分拣
      order_list: {
        count: 0,
        over_count: 0,
      },
      // 缺货商品占比
      order_list_que: {
        count: 0,
        over_count: 0,
      },
      //每小时分拣进度
      timearr: [],
    };
  },
  created() {
    // 加载数据
    this.sorting_all();
  },
  computed: {
    // 时间 年选择数组
    yeararr() {
      let date = new Date();
      let year = date.getFullYear();
      let yeararr = [];
      for (let i = year - 10; i <= year; i++) {
        yeararr.push(i);
      }
      return yeararr;
    },
    /* 商户分拣进度 */
    // 已分拣进度
    overPercent() {
      let percent = 0;
      if (this.user.count == 0) {
        percent = 0;
      } else {
        percent = (this.user.over_count / this.user.count) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },
    // 部分分拣进度
    partPercent() {
      let percent = 0;
      if (this.user.count == 0) {
        percent = 0;
      } else {
        percent = (this.user.in_count / this.user.count) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },
    // 未分拣
    nosortPercent() {
      let percent = 0;
      if (this.user.count == 0) {
        percent = 0;
      } else {
        percent = (this.user.up_count / this.user.count) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },

    /* 订单分拣进度 */
    order_over() {
      let percent = 0;
      if (this.order.count == 0) {
        percent = 0;
      } else {
        percent = (this.order.over_count / this.order.count) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },
    order_part() {
      let percent = 0;
      if (this.order.count == 0) {
        percent = 0;
      } else {
        percent = (this.order.in_count / this.order.count) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },
    order_no() {
      let percent = 0;
      if (this.order.count == 0) {
        percent = 0;
      } else {
        percent = (this.order.up_count / this.order.count) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },

    /* 单元分拣进度 */
    order_list_over() {
      // 已分拣
      let percent = 0;
      if (this.order.count == 0) {
        percent = 0;
      } else {
        let over = this.order_list.count - this.order_list.over_count;
        percent = (over / this.order.count) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },
    order_list_no() {
      // 未分拣
      let percent = 0;
      if (this.order_list.count == 0) {
        percent = 0;
      } else {
        percent = (this.order_list.over_count / this.order_list.count) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },
    /*  出清人员饼状图图标 */
    // 已出勤
    workPeople() {
      let percent = 0;
      let total = this.sort.count + this.sort.over_count;
      if (total != 0) {
        percent = (this.sort.count / total) * 100;
        percent = Math.round(percent);
      }

      return percent;
    },
    noworkPeople() {
      let percent = 0;
      let total = this.sort.count + this.sort.over_count;
      if (total != 0) {
        percent = (this.sort.over_count / total) * 100;
      }
      percent = Math.round(percent);
      return percent;
    },

    // 商品分拣进度
    goodsPlan() {
      let option = [
        {
          name: "部分分拣",
          value: this.goods.in_count,
        },
        {
          name: "已分拣",
          value: this.goods.over_count,
        },
        {
          name: "未分拣",
          value: this.goods.up_count,
        },
      ];
      return option;
    },

    // 缺货商品占比
    overCountPercent() {
      let option = [
        {
          name: "商品总数量",
          value: this.order_list_que.count,
        },
        {
          name: "缺货商品数量",
          value: this.order_list_que.over_count,
        },
      ];
      return option;
    },
  },
  mounted() {
    // 柱状图图表
    this.chartColumn();
  },
  updated() {
    // 商户分拣进度
    this.pieChart("chartColumn1", this.overPercent);
    this.pieChart("chartColumn2", this.partPercent);
    this.pieChart("chartColumn3", this.nosortPercent);

    // 出勤人员
    this.pieChart("chartColumn4", this.workPeople);
    this.pieChart("chartColumn5", this.noworkPeople);

    // 商品分拣进度
    this.goodsChart("chartColumn6", this.goodsPlan);
    this.goodsChart("chartColumn7", this.overCountPercent);
    this.timeLine(this.timearr);
  },
  methods: {
    // 获取数据
    sorting_all() {
      this.loading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.params
      );
      console.log(data);
      sorting_all(data).then((res) => {
        console.log(res);
        if (res.errcode == 0) {
          let data = res.data.arr;
          this.user = data.user;
          this.goods = data.goods;
          this.order = data.order;
          this.sort = data.sort;
          this.timearr = data.timearr;
          this.order_list_que = data.order_list_que;
          this.order_list = data.order_list;
        }
        this.loading = false;
      });
    },
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);

        // 清空画布
        myChart.clear();

        // 绘制图表
        myChart.setOption(option);

        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    // 单元分拣对比柱状图图表
    chartColumn() {
      // 柱状图
      let dom = "chartColumn";
      let salvProName = [
        "安徽省",
        "河南省",
        "浙江省",
        "湖北省",
        "贵州省",
        "江西省",
        "江苏省",
        "四川省",
        "云南省",
        "湖南省",
      ];
      let salvProValue = [239, 181, 154, 144, 135, 117, 74, 72, 67, 55];
      let option = {
        grid: {
          left: "0%",
          right: "10%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#717789",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: salvProName,
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            label: {
              show: true,
              color: "#89a4ea",
              position: "right", //每一条的数据位置
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#69bdfd",
                  },
                  {
                    offset: 1,
                    color: "#6188fd",
                  },
                ]),
              },
            },
            barWidth: 22,
            data: salvProValue,
          },
        ],
      };
      this.drawLine(dom, option);
    },

    // 商户分拣进度 && 分拣员出勤率  饼图图表
    pieChart(dom, point) {
      const handred = 100;
      let a = Math.floor(Math.random() * 6);
      let option = {
        title: {
          text: point + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#426ede",
            fontSize: "18",
          },
        },
        polar: {
          radius: ["60%", "70%"],
          center: ["50%", "50%"],
        },
        color: ["#e6f1fe"],
        angleAxis: {
          max: handred,
          show: false,
          startAngle: a > 3 ? 280 : 90,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            coordinateSystem: "polar",
            data: [point],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#6188fd",
                  },
                  {
                    offset: 1,
                    color: "#69bdfd",
                  },
                ]),
              },
            },
          },
        ],
      };
      this.drawLine(dom, option);
    },

    // 商品分拣进度
    goodsChart(dom, option) {
      var colorList = [
        {
          ringColor: [
            {
              offset: 0,
              color: "#FDB36A", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#73ACFF", // 100% 处的颜色
            },
          ],
        },
        {
          ringColor: [
            {
              offset: 0,
              color: "#02d6fc", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#367bec", // 100% 处的颜色
            },
          ],
        },
        {
          ringColor: [
            {
              offset: 0,
              color: "#73DDFF", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FDD56A", // 100% 处的颜色
            },
          ],
        },
      ];
      let optionb = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["50%", "65%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 20,
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    colorList[params.dataIndex].ringColor
                  );
                },
              },
            },
            label: {
              show: true,
              position: "outside",
              formatter: "{a|{b}：{d}%}\n{hr|}",
              padding: [0, -100, 25, -100],
              rich: {
                a: {
                  padding: [-30, 15, -20, 15],
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: option,
          },
        ],
      };
      this.drawLine(dom, optionb);
    },

    // 订单时间线
    timeLine(data) {
      var dateList = data.map(function (index, item) {
        return item;
      });
      var valueList = data.map(function (index, item) {
        return index;
      });

      let option = {
        xAxis: {
          type: "category",
          data: dateList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: valueList,
            type: "line",
          },
        ],
      };

      this.drawLine("timeLine", option);
    },

    // 时间选择事件
    handleCommand(value, type) {
      if (value < 10) {
        value = "0" + value;
      }
      if (type == 1) {
        this.time.year = value;
      } else if (type == 2) {
        this.time.month = value;
      } else if (type == 3) {
        this.time.day = value;
      }
      this.params.send_time =
        this.time.year + "-" + this.time.month + "-" + this.time.day;
      this.sorting_all();
    },
  },

  // 订单分拣进度
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.monitor {
  .paddingRight30 {
    padding-left: 30px !important;
  }
  .monitor_ti {
    font-size: $font_16;
    color: $colour_18;
    border-bottom: 1px solid $colour_e6;
    height: 50px;
    line-height: 50px;
  }
  .monitor_ryz {
    font-size: $font_16;
    color: #648dfc;
    margin-top: 15px;
    font-weight: bold;
    &.on {
      text-align: center;
    }
  }

  .monitor_ryl_t {
    ul {
      border-bottom: 1px solid $colour_e6;
      margin-bottom: 60px;
      li {
        width: 33.33%;
        position: relative;
        .monitor_ryl_th {
          height: 200px;
          width: 100%;
          margin-top: -10px;
        }
        .monitor_ryl_tb {
          position: absolute;
          left: 0;
          right: 0;
          bottom: -50px;
          width: 80%;
          text-align: center;
          margin: auto;
          height: 30px;
          line-height: 30px;
          font-size: $font_12;
          color: $white;
          padding-left: 10px;
          padding-right: 10px;
          border-radius: 4px;
          background: #737373;
        }
      }
    }
  }
  .monitor_l {
    width: 350px;
    .monitor_ls {
      background-image: linear-gradient(to bottom right, #5a5efd, #68b6fe);
      box-shadow: 0px 0px 5px #868686;
      border-radius: 4px;
      height: 250px;
      h3 {
        height: 50px;
        line-height: 50px;
        font-size: $font_16;
        color: $white;
        border-bottom: 1px solid #b3b3b3;
      }
    }
    .monitor_ld {
      h3 {
        height: 50px;
        line-height: 50px;
        font-size: $font_16;
        color: #5178e1;
        border-bottom: 1px solid $colour_e6;
      }
    }
  }
  #chartColumn {
    width: 100%;
    height: 600px;
  }
  .monitor_ryh {
    height: 250px;
    width: 100%;
  }
  .monitor_r {
    width: calc(100% - 370px);
    margin-left: 20px;
    .monitor_ry {
      .monitor_ryl {
        width: 46%;
      }
      .monitor_ryo {
        width: 27%;
      }
      .monitor_ryr {
        width: 27%;
      }
    }
    .monitor_rq {
      .monitor_rql {
        width: 27%;
      }
      .monitor_rqo {
        width: 46%;
        .monitor_ryl_t {
          ul {
            li {
              width: 50%;
              .monitor_ryl_tb {
                width: 60%;
              }
            }
          }
        }
      }
      .monitor_rqr {
        width: 27%;
      }
    }
  }
}

// 订单柱状图
.orderbar {
  padding: 40px 10px;
  height: 250px;
  box-sizing: border-box;
  .el-progress {
    display: flex;
    width: 100%;
    margin: 25px 0;
  }
}

// 时间图
.timeLine {
  height: 250px;
  width: 100%;
  background-color: #fff;
  margin-top: 20px;
}

//配送日期时间选择
.timebox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 65px;
  .el-dropdown-link {
    font-size: 24px;
    color: #fff;
  }
  .date {
    margin-right: 6px;
  }
  .menubox {
    height: 50px !important;
    overflow: auto !important;
  }
}
</style>
